<template>
  <div>
    <RouterLink to="/">返回</RouterLink>
    <h2>更新页面</h2>
    <p><label for="">商品价格</label><input type="text" v-model="name" disabled></p>
    <p><label for="">商品价格</label><input type="text" v-model="price"></p>
    <p><label for="">商品数量</label><input type="text" v-model="count"></p>
    <p><button @click="changeUpdate">更新数据</button></p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getDataById, updateData } from '../api/RequestApi'

let price = ref('')
let name = ref('')
let count = ref('')

let route = useRoute()
let router = useRouter()
let { id } = route.params


const getupdateDataById = async () => {
  //更新之前,需要根据id查询旧数据做回显
  let { code, data } = await getDataById(id)
  // console.log(code, data)
  data.forEach(item => {
    price.value = item.good_price
    name.value = item.good_name
    count.value = item.good_count
  })
}


const changeUpdate = async () => {
  // console.log(price)
  let res = await updateData(id, { price: price.value, count: count.value })
  console.log(res)
  if (res.code === 1002) {
    router.push('/')
  }
}

onMounted(() => getupdateDataById())

</script>

<style lang="scss" scoped></style>